<div class="padding-bottom-45">

  <h3>
    <span>{{l('EditUser')}}</span>
  </h3>


  <form nz-form [formGroup]="validateForm" (ngSubmit)="submit()" *ngIf="user">
    <nz-tabset>
      <nz-tab [nzTitle]="l('UserDetails')">
        <!-- 用户账号 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <input nz-input formControlName="userName" [placeholder]="l('UserName')">
            <nz-form-explain *ngIf="validateForm.get('userName').dirty&&validateForm.get('userName').errors">
              <ng-container *ngIf="validateForm.get('userName').hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 名 / 姓名 -->
        <nz-form-item>
          <nz-col [nzSpan]="12">
            <nz-form-control nzHasFeedback>
              <input nz-input formControlName="name" [placeholder]="l('name')" autocomplete="name">
              <nz-form-explain *ngIf="validateForm.get('name').dirty&&validateForm.get('name').errors">
                <ng-container *ngIf="validateForm.get('name').hasError('required')">{{l('CanNotNull')}}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-col>
          <nz-col [nzSpan]="12">
            <nz-form-control nzHasFeedback>
              <input nz-input formControlName="surname" [placeholder]="l('Surname')">
              <nz-form-explain *ngIf="validateForm.get('surname').dirty&&validateForm.get('surname').errors">
                <ng-container *ngIf="validateForm.get('surname').hasError('required')">{{l('CanNotNull')}}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-col>
        </nz-form-item>

        <!-- 邮箱 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <input nz-input formControlName="emailAddress" [placeholder]="l('EmailAddress')" autocomplete="email">
            <nz-form-explain *ngIf="validateForm.get('emailAddress').dirty&&validateForm.get('emailAddress').errors">
              <ng-container *ngIf="validateForm.get('emailAddress').hasError('required')">{{l('CanNotNull')}}</ng-container>
              <ng-container *ngIf="validateForm.get('emailAddress').hasError('email')">{{l('NotEmail')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 激活 -->
        <nz-form-item>
          <label nz-checkbox formControlName="isActive">{{l('IsActive')}}</label>
        </nz-form-item>
      </nz-tab>


      <nz-tab [nzTitle]="l('UserRoles')">
        <nz-checkbox-group formControlName="roles"></nz-checkbox-group>
      </nz-tab>

    </nz-tabset>


    <!-- 功能按钮 -->
    <div class="custom-modal-footer">
      <div class="custom-modal-footter-group">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
          {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" type="button" (click)="submit()" [disabled]="!validateForm.valid">
          {{l("Save")}}
        </button>
      </div>
    </div>

  </form>
</div>
